<template>
  <div class="fit justify-center row">
    <div class="fit q-pa-md profile-uploads">
      <div style="width: 100%">
        <div class="time-label q-my-sm">{{ $t('profile.recentUploads') }}</div>
        <div class="grid-video-container">
          <video-card
            v-for="video in videos"
            :key="video.id"
            :video="video"
            :ratio="4 / 4.3"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import VideoCard from 'components/video/SmallVideoCard.vue';
import { computed, onBeforeMount } from 'vue';
import { useUserStore } from 'src/stores/user-store.js';
const userStore = useUserStore();
const videos = computed(() => userStore.myVideos);
onBeforeMount(async () => {
  await userStore.getMyVideos({ page: 0, size: 12 });
});
</script>
<style lang="scss" scoped>
.time-label {
  font-size: 14px;
  color: #acacac;
}
.profile-uploads {
  max-width: 1450px;
  min-width: 960px;
  width: 100%;
}
</style>
